<template>
  <div class="moments-container">
    <div class="moments-header">
      <div class="header-text">
        <div class="title">说说</div>
        <div class="subtitle">发现新鲜事</div>
      </div>
      <div class="add-moment">
        <el-button type="primary" @click="openEditor">写说说</el-button>
      </div>
    </div>
    
    <!-- 说说列表 -->
    <div class="moments-list" v-loading="loading">
      <div v-for="moment in moments" :key="moment.id" class="moment-item">
        <div class="user-avatar">
          <img v-lazy="moment.avatar" :key="moment.avatar" class="avatar" />
          <!-- 移动端显示的用户信息 -->
          <div class="mobile-user-info">
            <span class="name">{{ moment.nickname }}</span>
            <span class="time">
              <i class="fas fa-clock"></i>
              {{ formatTime(moment.createTime) }}
            </span>
          </div>
        </div>
        <div class="moment-main">
          <!-- PC端显示的用户信息 -->
          <div class="moment-header">
            <span class="name">{{ moment.nickname }}</span>
            <span class="time">
              <i class="fas fa-clock"></i>
              {{ formatTime(moment.createTime) }}
            </span>
          </div>
          <div class="moment-content-wrapper">
            <div class="moment-content" v-html="moment.content"></div>
            <div class="moment-images" v-if="moment.images?.length">
              <img v-for="(img, index) in moment.images" :key="img" v-lazy="img"
                @click="previewImage(moment.images, index)" />
            </div>
          </div>
        </div>
      </div>
      <div class="pagination-box">
        <el-pagination background v-if="moments.length" @current-change="handlePageChange"
          :current-page="params.pageNum" :page-size="params.pageSize" layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 发布说说弹窗 -->
    <el-dialog
      :visible.sync="editorVisible"
      title="发布说说"
      width="600px"
      :before-close="handleClose"
      class="moment-editor-dialog"
    >
      <quill-editor
        v-model="momentContent"
        ref="myQuillEditor"
        :options="editorOption"
        class="editor"
      />
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="editorVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitMoment" :loading="submitting">发 布</el-button>
      </div>
    </el-dialog>

    <!-- 添加图片预览组件 -->
    <mj-image-preview ref="imagePreview" />
  </div>
</template>

<script>
import { formatTime } from '@/utils/time'
import { getMoments,publishMoment } from '@/api/moments'
// 引入富文本编辑器
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'Moments',
  components: {
    quillEditor
  },

  data() {
    return {
      moments: [],
      loading: false,
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      // 编辑器相关
      editorVisible: false,
      momentContent: '',
      submitting: false,
      editorOption: {
        placeholder: '分享你的新鲜事...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['clean'],
            ['link', 'image']
          ]
        }
      }
    }
  },
  mounted() {
    this.fetchMoments()
  },

  methods: {
    openEditor() {
      this.editorVisible = true
      this.momentContent = ''
    },
    
    handleClose(done) {
      this.$confirm('确认关闭？未保存的内容将会丢失')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    
    async submitMoment() {
      if (!this.momentContent.trim()) {
        this.$message.warning('说说内容不能为空')
        return
      }
      
      try {
        this.submitting = true
        // 这里调用发布说说的API
        console.log(this.momentContent);
        
        await publishMoment({ content: this.momentContent })
        this.$message.success('发布成功')
        this.editorVisible = false
        // 重新获取说说列表
        this.fetchMoments()
      } catch (error) {
        console.error('发布说说失败:', error)
        this.$message.error('发布失败，请重试')
      } finally {
        this.submitting = false
      }
    },
    
    parseImages(images) {
      if (!images) return []
      return images.split(',').filter(img => img)
    },
    async fetchMoments() {
      try {
        this.loading = true
        const res = await getMoments(this.params)
        this.moments = res.data.records
        this.total = res.data.total
        this.moments.forEach(moment => {
          moment.images = this.parseImages(moment.images)
        })
      } catch (error) {
        console.error('获取说说列表失败:', error)
      } finally {
        this.loading = false
      }
    },

    handlePageChange(page) {
      this.params.pageNum = page
      this.fetchMoments()
    },

    previewImage(images, index) {
      // 使用图片预览组件的 show 方法
      this.$refs.imagePreview.show(images, index)
    },

    formatTime(time) {
      return formatTime(time)
    }
  }
}
</script>

<style lang="scss" scoped>
.moments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);

  .header-text {
    display: flex;
    flex-direction: column;
    
    .title {
      font-size: 28px;
      font-weight: 700;
      color: #0072ff;
      line-height: 1.2;
      margin-bottom: 4px;
    }
    
    .subtitle {
      font-size: 14px;
      color: var(--text-secondary);
      font-weight: 400;
    }
  }

  .add-moment {
    .el-button {
      padding: 10px 20px;
      border-radius: 20px;
      font-weight: 500;
      background-color: #0072ff;
      border: none;
      
      &:hover {
        opacity: 0.9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 198, 255, 0.3);
      }
    }
  }

  @media screen and (max-width: 768px) {
    padding: 15px 0;
    margin-bottom: 15px;
    
    .header-text {
      .title {
        font-size: 24px;
      }
      
      .subtitle {
        font-size: 13px;
      }
    }
  }
}

.moments-container {
  max-width: 800px;
  margin: 0 auto;
  min-height: calc(100vh - 70px);
}

.moment-item {
  border-radius: $border-radius-sm * 3;
  padding: $spacing-lg;
  margin-bottom: $spacing-sm;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  gap: 16px;

  @media screen and (max-width: 768px) {
    flex-direction: column;
    gap: 12px;
    padding: $spacing-md;
  }
}

.user-avatar {
  flex-shrink: 0;
  width: 46px;

  .avatar {
    width: 46px;
    height: 46px;
    border-radius: $border-radius-md;
    object-fit: cover;
  }

  @media screen and (max-width: 768px) {
    width: auto;
    display: flex;
    align-items: center;
    gap: 12px;

    .avatar {
      width: 40px;
      height: 40px;
    }
  }
}

.moment-main {
  flex: 1;
  min-width: 0;

  @media screen and (max-width: 768px) {
    .moment-header {
      display: none;
    }
  }
}

.moment-header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;

  .name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
  }

  .time {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;

    i {
      color: $primary;
    }
  }
}

.moment-content-wrapper {
  background: var(--card-bg);
  padding: 16px;
  border-radius: 0 $border-radius-lg*2 $border-radius-lg*2 $border-radius-lg*2;

  @media screen and (max-width: 768px) {
    border-radius: $border-radius-lg;
  }

  .moment-content {
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 15px;
    white-space: pre-wrap;
    word-break: break-word;
    :deep(li) {
      margin-left: 30px;
    }
  }

  .moment-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-top: 16px;

    @media screen and (max-width: 768px) {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      border-radius: 8px;
      cursor: zoom-in;
    }
  }
}

.mobile-user-info {
  display: none;
  flex-direction: column;

  @media screen and (max-width: 768px) {
    display: flex;
  }

  .name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
  }

  .time {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;

    i {
      color: $primary;
    }
  }
}

// 编辑器弹窗样式
.moment-editor-dialog {
  .editor {
    min-height: 200px;
    
    :deep(.ql-editor) {
      min-height: 200px;
    }
  }
  
  .dialog-footer {
    text-align: right;
  }
}

@media screen and (max-width: 768px) {
  .moment-editor-dialog {
    width: 95% !important;
  }
}
</style>